<template>
    <div class="cards">
        <div class="head_tool">
            <span @click="back"><</span>
        </div>
        <ul>
            <li class="clearfix">
                <div><span class="msg_box msg1"></span><span class="title">姓名</span></div>
                <div><input type="text" name="name_id" :value="name" v-on:input="nameVal" placeholder="请输入姓名"></div>
            </li>
            <li class="clearfix">
                <div><span class="msg_box msg2"></span><span class="title">证件类型</span></div>
                <div>
                    <input type="text" readonly name="cord_id" :value="checks" @click="cords" placeholder="请选择证件类型">
                    <van-popup v-model="show" position="bottom" :overlay="true">
                           <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
                    </van-popup>
                </div>

            </li>
            <li class="clearfix" style="height: auto">
                <div><span class="msg_box msg2"></span><span class="title">证件照</span></div>
                <div style="margin-top: 40px;margin-left: 25px;">
                    <van-uploader :after-read="onRead" accept="image/jpeg;image/png" >
                        <div style="margin-right: 30px;">
                            <img :src="img_front" v-if="flag" id="front" class="borderimg">
                            <img src="../../common/image/imgback_front.png" v-else  id="front" >
                            <b style="display: block;margin-top: -14px;color: gainsboro;">证件正面</b>
                        </div>
                    </van-uploader>
                    <van-uploader :after-read="onReadback" accept="image/jpeg;image/png" v-if="this.checks == '身份证'">
                        <div style="margin-right: 30px;">
                            <img :src="img_back" v-if="flagback" id="back" class="borderimg">
                            <img src="../../common/image/imgback_front.png" v-else  id="back" >
                            <b style="display: block;margin-top: -14px;color: gainsboro;">证件反面</b>
                        </div>
                    </van-uploader>
                </div>
            </li>
        </ul>
        <button type="button" v-if="!is_cert" @click="validat">验证</button>
        <p class="tips">信息已加密，仅用于身份验证，不保存证件照片</p>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import { RequestGet,RequestPost} from '@/api/http.js'
    export default {
        data(){
          return{
              name: '',
              uid: '',
              img_front: '',
              img_back: '',
              flag: false,
              flagback: false,
              columns: ['教师证', '身份证', '学生证'],
              show:false,
              checks:'',
              is_cert: ''
          }
        },
        component:{
            Toast
        },
        methods:{
            back(){
                this.$router.go(-1);
            },
            nameVal(e){
                let name = document.querySelector('input[name=name_id]');
                let list = document.querySelectorAll('.cards ul li');
                if(e){
                    name.className = '';
                    list[0].style.borderBottomColor = 'gainsboro';
                }else {
                    name.className = 'active_no';
                    list[0].style.borderBottomColor = 'red';
                }
            },
            onRead(file) {
                this.img_front = file.content;
                this.flag =true;
            },
            onReadback(e){
                this.img_back = e.content;
                this.flagback =true;
            },
            cords(){
                this.show = true;
            },
            onConfirm(val) {
                let cord = document.querySelector('input[name=cord_id]');
                let list = document.querySelectorAll('.cards ul li');
                this.checks = val;
                this.show = false;
                cord.className = '';
                list[1].style.borderBottomColor = 'gainsboro';
            },
            onCancel() {
                this.show = false;
            },
            getInfo() {
                let self = this;
                RequestPost({url:'/user/certInfo',data: {'uid':this.$route.query.uid}}).then((respones)=>{
                    if(respones.data.code == 1){
                        self.checks = respones.data.data.check_type_val
                        if(self.checks){
                           self.is_cert = true
                        }
                        if(self.checks == '学生证'){
                           self.flag = true
                           self.img_front = respones.data.data.studentid
                        }
                        if(self.checks == '教师证'){
                            self.flag = true
                            self.img_front = respones.data.data.teachid
                        }
                        if(self.checks == '身份证'){
                            self.flag = true
                            self.flagback = true
                            self.img_front = respones.data.data.front_idcard
                            self.img_back = respones.data.data.back_idcard
                        }
                    }else{
                        Toast('服务器繁忙，请稍后再试！');
                    }

              })
            },
            validat(){
                let self = this;
                let name = document.querySelector('input[name=name_id]');
                let cord = document.querySelector('input[name=cord_id]');
                let list = document.querySelectorAll('.cards ul li');
                if(name.value != '' && cord.value != '' && (self.flagback || self.flag)){

                    let data = {'uid':this.$route.query.uid}
                    if(self.checks == '学生证'){
                      data['check_type'] = 'studentID'
                      data['studentid'] = self.img_front
                    }
                    if(self.checks == '教师证'){
                      data['check_type'] = 'teachID';
                      data['teachid'] = self.img_front
                    }
                    if(self.checks == '身份证'){
                      data['check_type'] = 'IDcard'
                      data['front_idcard'] = self.img_front
                      data['back_idcard'] = self.img_back
                    }
                    RequestPost({url:'/user/certApply',data: data}).then((respones)=>{
                      if(respones.data.code == 1){
                        self.$router.go(-1);
                      }else{
                        Toast('服务器繁忙，请稍后再试！');
                      }

                    })
                }else {
                    if(name.value == ''){
                        Toast({
                            message: '请输入姓名',
                            position: 'bottom',
                            duration: 5000
                        });
                        name.className = 'active_no';
                        list[0].style.borderBottomColor = 'red';
                    }else if(cord.value == ''){
                        Toast({
                            message: '请选择证件类型',
                            position: 'bottom',
                            duration: 5000
                        });
                        cord.className = 'active_no';
                        list[1].style.borderBottomColor = 'red';
                    }else if(!self.flagback && !self.flag){
                        Toast({
                            message: '请上传证件照',
                            position: 'bottom',
                            duration: 5000
                        });
                    }

                }

            }

        },
        watch: {
          '$route': function (n, o) {
            this.uid = n.query.uid;
            this.name = n.query.name;
          }
        },
        mounted () {
          let self = this;
          self.getInfo();
          self.uid = self.$route.query.uid;
          self.name = self.$route.query.name;
        }
    }
</script>

<style scoped lang="scss">
    .cards{
        width: 100%;
        text-align: center;
        overflow: hidden;
        .head_tool{
            padding: 20px;
            background:#557ae4;
            color: #fff;
            height: 40px;
            font-size: 32px;
            span:first-child{
                float: left;
                transform: scaleY(1.8);
               line-height: 40px;
            }
        }
        ul{
            width: 100%;
            li{
                width: 100%;
                height: 90px;
                line-height: 90px;
                border-bottom: 1px solid gainsboro;
                padding-left:30px;
                div{
                    float: left;
                    font-size: 30px;
                    .msg_box{
                        display: block;
                        float: left;
                        text-align: left;
                        text-indent: 60px;
                        width:50px;
                        height: 50px;
                        margin-top: 20px;
                    }
                    .msg1{background: url('~@/common/image/name.png') left center no-repeat;background-size: 77% !important;}
                    .msg2{background: url('~@/common/image/id_cord.png') left center no-repeat;background-size: 77% !important;}
                    input{
                        text-indent: 30px;
                        margin-left:20px;
                        background: transparent;
                        font-size:30px;
                    }
                    .title{
                        display: inline-block;
                        width: 170px;
                        text-align: left;
                        text-indent: 6px;
                    }
                    .van-picker{
                        width: 100%;
                    }
                    #front,#back{
                        width: 150px;
                        height: 150px;
                    }
                  .borderimg{
                    border: 1px solid #EEF;
                    padding: 5px;
                    box-sizing: border-box;
                  }
                }
            }

        }
        button{
            color: #fff;
            background: #05c;
            width: 70%;
            height: 80px;
            line-height: 80px;
            border: none;
            border-radius: 5px;
            font-size: 30px;
            margin-top: 30px;
        }
        .tips{
            color: gainsboro;
            font-size: 26px;
            margin-top: 20px;
        }

    }
</style>
<style>
    .van-picker__toolbar{height: 1rem;line-height: 1rem;}
    .van-picker__cancel,.van-picker__confirm,.van-picker-column ul li{font-size: 30px;}
    .mint-toast-text{font-size: 30px;padding: 10px;}
    .active_no::-webkit-input-placeholder{color:red;}
</style>
